<template>
  <div class="userList">
    <headTop></headTop>
    <div class="table_container">
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{color:'black',background:'#eef1f6'}"
        size="medium"
        header-align
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" width="100" label="#"></el-table-column>
        <el-table-column prop="registe_time" width="220" label="注册日期"></el-table-column>
        <el-table-column prop="username" width="220" label="用户姓名"></el-table-column>
        <el-table-column prop="city" label="注册地址"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15,20,25]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import { getUserList, getUserCount } from "../api/getData";
export default {
  data() {
    return {
      tableData: [],
      // 每页显示条数
      limit: 10,
      // 跳过的条数
      offset: 0,
      // 当前页数
      currentPage: 1,
      // 当前行数
      currentRow: null,
      // 总数
      count: 0,
      loading: true
    };
  },
  components: {
    headTop,
  },
  created() {
    this.getUser();
    this.initData();
  },
  methods: {
    async getUser() {
      // 获取用户列表
      const { data } = await getUserList({
        limit: this.limit,
        offset: this.offset,
      });
      this.loading = false
      console.log("用户列表===", data);
      this.tableData = data;
    },
    async initData() {
      //  获取用户总数量
      try {
        const { data } = await getUserCount();
        console.log("用户总数=====", data);
        if (data.status == 1) {
          this.count = data.count;
        } else {
          throw new Error("获取数据失败");
        }
      } catch (err) {
        console.log("获取数据失败", err);
      }
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getUser();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
      this.getUser();
    },
  },
};
</script>

<style lang='less' scoped>
@import "../style/mixin.less";
.table_container {
  padding: 20px;
}
.el-table {
  border: 1px solid #dfe6ec;
}
</style>